<template>
  <div class="app-container home">
    <div class="head">
      <div>请选择月份:</div>
      <el-date-picker
        v-model="date"
        type="month"
        placeholder="选择月份"
        size="medium"
        format="yyyy 年 MM 月"
        :picker-options="dateOptions"
        ref="datePicker"
      ></el-date-picker>
      <el-button type="primary" @click="calculate">污染源解析</el-button>
      <span style="width: 0; flex: 1"></span>
      <div>请选择成分数:</div>
      <el-select v-model="compCount" placeholder="请选择" @change="showResult">
        <el-option v-for="item in 8" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <div>请选择指标:</div>
      <el-select v-model="wqIndex" placeholder="请选择" @change="showResult">
        <el-option
          v-for="item in wqIndices"
          :key="item.name"
          :label="item.label"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
    <div class="result-container">
      <div class="result-container-comp">
        <Echarts :options="compOptions" ref="chart1" />
      </div>
      <div class="result-container-src">
        <Echarts :options="srcOptions" ref="chart2" />
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "@/components/Echarts";

import { formatDate } from "@/utils/formatTime";
import { screePlot, pieOption } from "@/components/Echarts/options";
import { apportion } from "@/api/application/apportion";

export default {
  dicts: [],
  components: {
    Echarts,
  },
  data() {
    return {
      date: new Date(),
      dateOptions: {
        disabledDate(time) {
          return time >= new Date(formatDate(new Date(), "YYYY-mm-dd"));
        },
      },
      compOptions: {},
      compCount: null,
      srcOptions: {},
      wqIndices: [
        { name: "PH", label: "PH值(无量纲)" },
        { name: "DO", label: "溶解氧(mg/L)" },
        { name: "IMn", label: "高锰酸盐指数(mg/L)" },
        { name: "COD", label: "化学需氧量(mg/L)" },
        { name: "BOD5", label: "五日生化需氧量(mg/L)" },
        { name: "AN", label: "氨氮(mg/L)" },
        { name: "TP", label: "总磷(mg/L)" },
      ],
      wqIndex: null,
      data: {
        comp4_PH: [6.18, 10.13, 59.41, 16.27, 8.01],
        comp4_DO: [2.48, 11.91, 66.34, 9.65, 9.62],
        comp4_IMn: [0.61, 20.39, 22.62, 34.99, 21.39],
        comp4_COD: [12.13, 3.41, 8.47, 56.76, 19.23],
        comp4_BOD5: [11.25, 1.73, 9.5, 58.33, 19.19],
        comp4_AN: [7.09, 3.65, 71.59, 15.34, 2.34],
        comp4_TP: [2.89, 27.12, 7.81, 46.28, 15.9],
      },
    };
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    calculate() {
      // var compDatas = [
      //   3.48773818, 2.11898113, 1.30936113, 1.26033766, 3.33771133e-1,
      //   1.68234866e-1, 3.94602812e-2, 9.3883537e-3, 1.63486429e-32,
      //   9.67902914e-33, 3.00204972e-33, 7.45538013e-34,
      // ];
      
      apportion(this.date).then((response) => {
        this.data = response.data;
        this.compOptions = screePlot(this.data.components);
        this.showResult();
      });
    },
    showResult() {
      var key = `comp${this.compCount}_${this.wqIndex}`;
      var data = this.data[key];
      data = data.map((x, idx) => {
        return {
          name: idx < this.compCount ? `成分${idx + 1}` : "未知成分",
          value: x,
        };
      });
      this.srcOptions = pieOption(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 16px;
  width: 100%;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.result-container {
  width: 100%;
  height: 0;
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 16px;
  &-comp {
    width: 50%;
    height: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
  &-src {
    width: 50%;
    height: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }
}
</style>
